<template>
  <view class="topic-detail-page">

    <!-- 话题内容 -->
    <scroll-view scroll-y class="topic-scroll" @scrolltolower="loadMoreComments">
      <view class="topic-content">
        <!-- 话题作者信息 -->
        <view class="topic-author">
          <image :src="topic.author.avatar" alt="用户头像" class="author-avatar"></image>
          <view class="author-info">
            <view class="author-name">
              <text>{{ topic.author.name }}</text>
              <view class="verified-badge" v-if="topic.author.verified">
                <uni-icons type="checkmark-circle" size="14" color="#165DFF"></uni-icons>
              </view>
            </view>
            <view class="topic-meta">
              <text>{{ topic.publishTime }}</text>
              <text class="topic-category">· {{ topic.category }}</text>
            </view>
          </view>
         <!-- <view class="follow-btn" v-if="!topic.author.isFollowed" @click="followAuthor">
            <text>关注</text>
          </view>
          <view class="followed-btn" v-if="topic.author.isFollowed" @click="unfollowAuthor">
            <text>已关注</text>
          </view> -->
        </view>
        
        <!-- 话题主体内容 -->
        <view class="topic-main">
          <view class="topic-title" v-if="topic.title">
            <text>{{ topic.title }}</text>
          </view>
          <view class="topic-text">
            <text>{{ topic.content }}</text>
          </view>
          
          <!-- 话题图片 -->
          <view class="topic-images" v-if="topic.images.length > 0">
            <view class="image-grid" :class="'grid-' + getImageGridClass(topic.images.length)">
              <image 
                :src="imgUrl" 
                alt="话题图片" 
                class="topic-image"
                v-for="(imgUrl, imgIndex) in topic.images" 
                :key="imgIndex"
                @click="previewImage(imgUrl, topic.images)"
              ></image>
            </view>
          </view>
          
          <!-- 话题标签 -->
          <view class="topic-tags" v-if="topic.tags.length > 0">
            <view class="tag-item" v-for="(tag, tagIndex) in topic.tags" :key="tagIndex" @click="gotoTagTopics(tag)">
              #{{ tag }}
            </view>
          </view>
        </view>
        
        <!-- 话题互动数据 -->
        <view class="topic-actions">
          <view class="action-item" @click.stop="handleLike">
            <uni-icons 
              type="heart" 
              size="20" 
              :color="topic.isLiked ? '#FF4D4F' : '#86909C'" 
              :filled="topic.isLiked"
            ></uni-icons>
            <text class="action-count" :class="topic.isLiked ? 'liked' : ''">{{ topic.likeCount }}</text>
          </view>
          <view class="action-item" @click.stop="focusComment">
            <uni-icons type="chatbubble" size="20" color="#86909C"></uni-icons>
            <text class="action-count">{{ topic.commentCount }}</text>
          </view>
          <view class="action-item" @click.stop="handleShare">
            <uni-icons type="share" size="20" color="#86909C"></uni-icons>
            <text class="action-count">{{ topic.shareCount }}</text>
          </view>
          <view class="action-item" @click.stop="handleCollect">
            <uni-icons 
              type="star" 
              size="20" 
              :color="topic.isCollected ? '#FFD700' : '#86909C'" 
              :filled="topic.isCollected"
            ></uni-icons>
            <text class="action-count" :class="topic.isCollected ? 'collected' : ''">收藏</text>
          </view>
        </view>
      </view>
      
      <!-- 评论区分割线 -->
      <view class="divider">
        <text>评论 ({{ topic.commentCount }})</text>
      </view>
      
      <!-- 评论输入框 -->
      <view class="comment-input-container">
        <image :src="currentUser.avatar" alt="当前用户头像" class="user-avatar"></image>
        <textarea 
          class="comment-input" 
          placeholder="分享你的观点..."
          v-model="commentContent"
          maxlength="500"
          @focus="onCommentFocus"
          @blur="onCommentBlur"
        ></textarea>
        <button class="send-btn" @click="submitComment" :disabled="!commentContent.trim()">
          发送
        </button>
      </view>
      
      <!-- 评论列表 -->
      <view class="comments-list">
        <view class="comment-item" v-for="(comment, index) in comments" :key="comment.id">
          <image :src="comment.author.avatar" alt="评论者头像" class="comment-avatar"></image>
          <view class="comment-content">
            <view class="comment-header">
              <text class="comment-author">{{ comment.author.name }}</text>
              <text class="comment-time">{{ comment.publishTime }}</text>
            </view>
            <view class="comment-text">
              <text>{{ comment.content }}</text>
            </view>
            <view class="comment-actions">
              <view class="comment-action" @click.stop="likeComment(comment, index)">
                <uni-icons 
                  type="heart" 
                  size="16" 
                  :color="comment.isLiked ? '#FF4D4F' : '#86909C'" 
                  :filled="comment.isLiked"
                ></uni-icons>
                <text class="action-text">{{ comment.likeCount }}</text>
              </view>
              <view class="comment-action" @click.stop="replyComment(comment)">
                <uni-icons type="chatbubble" size="16" color="#86909C"></uni-icons>
                <text class="action-text">回复</text>
              </view>
            </view>
            
            <!-- 评论回复 -->
            <view class="comment-replies" v-if="comment.replies && comment.replies.length > 0">
              <view class="reply-item" v-for="(reply, rIndex) in comment.replies" :key="reply.id">
                <text class="reply-author">{{ reply.author.name }}</text>
                <text class="reply-to" v-if="reply.toUserId"> 回复 {{ reply.toUserName }}</text>
                <text class="reply-content">: {{ reply.content }}</text>
                <view class="reply-actions">
                  <view class="reply-action" @click.stop="likeReply(comment, reply, rIndex)">
                    <uni-icons 
                      type="heart" 
                      size="14" 
                      :color="reply.isLiked ? '#FF4D4F' : '#86909C'" 
                      :filled="reply.isLiked"
                    ></uni-icons>
                    <text class="reply-like-count">{{ reply.likeCount }}</text>
                  </view>
                  <view class="reply-action" @click.stop="replyToReply(comment, reply)">
                    <text class="reply-text">回复</text>
                  </view>
                </view>
              </view>
              
              <view class="show-more-replies" v-if="comment.replies.length < comment.totalReplyCount" @click="loadMoreReplies(comment)">
                <text>查看更多 {{ comment.totalReplyCount - comment.replies.length }} 条回复</text>
              </view>
            </view>
            
            <!-- 回复输入框 -->
            <view class="reply-input-container" v-if="comment.showReplyInput">
              <textarea 
                class="reply-input" 
                :placeholder="comment.replyingTo ? '回复 @' + comment.replyingTo.name + '...' : '写下你的回复...'"
                v-model="comment.replyContent"
                maxlength="300"
                @confirm="submitReply(comment)"
              ></textarea>
              <view class="reply-input-actions">
                <text class="cancel-reply" @click.stop="cancelReply(comment)">取消</text>
                <text class="send-reply" @click.stop="submitReply(comment)" :class="!comment.replyContent.trim() ? 'disabled' : ''">发送</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多评论 -->
      <view class="loading-more" v-if="isLoadingComments">
        <uni-loading-icon size="24" color="#165DFF"></uni-loading-icon>
        <text class="loading-text">加载更多评论...</text>
      </view>
      
      <!-- 没有更多评论 -->
      <view class="no-more" v-if="!hasMoreComments && !isLoadingComments && comments.length > 0">
        <text>没有更多评论了</text>
      </view>
      
      <!-- 暂无评论 -->
      <view class="no-comments" v-if="comments.length === 0 && !isLoadingComments">
        <uni-icons type="chatbubble" size="48" color="#C9CDD4"></uni-icons>
        <text class="no-comments-text">还没有评论，快来抢沙发~</text>
      </view>
      
      <!-- 相关推荐 -->
      <view class="related-topics" v-if="relatedTopics.length > 0">
        <view class="related-title">
          <text>相关推荐</text>
        </view>
        <view class="related-list">
          <view class="related-item" v-for="(item, index) in relatedTopics" :key="item.id" @click="gotoTopicDetail(item.id)">
            <view class="related-content">
              <text class="related-title-text">{{ item.title || item.content.substring(0, 30) + '...' }}</text>
              <view class="related-meta">
                <text class="related-author">{{ item.author.name }}</text>
                <text class="related-time">{{ item.publishTime }}</text>
                <view class="related-stats">
                  <uni-icons type="chatbubble" size="14" color="#86909C"></uni-icons>
                  <text>{{ item.commentCount }}</text>
                </view>
              </view>
            </view>
            <image :src="item.images[0]" alt="相关话题图片" class="related-image" v-if="item.images.length > 0"></image>
          </view>
        </view>
      </view>
      
      <!-- 底部空白区域，避免被输入框遮挡 -->
      <view class="bottom-padding" :style="{ height: showInputPanel ? '300rpx' : '100rpx' }"></view>
    </scroll-view>

    <!-- 操作菜单 -->
    <view class="action-sheet" v-if="showActionSheet">
      <view class="sheet-mask" @click="hideActionSheet"></view>
      <view class="sheet-content">
        <view class="sheet-item" @click="reportTopic" v-if="!isOwnTopic">
          <uni-icons type="alert" size="20" class="sheet-icon"></uni-icons>
          <text>举报话题</text>
        </view>
        <view class="sheet-item" @click="editTopic" v-if="isOwnTopic">
          <uni-icons type="edit" size="20" class="sheet-icon"></uni-icons>
          <text>编辑话题</text>
        </view>
        <view class="sheet-item" @click="deleteTopic" v-if="isOwnTopic">
          <uni-icons type="trash" size="20" class="sheet-icon"></uni-icons>
          <text>删除话题</text>
        </view>
        <view class="sheet-item" @click="shareTopic">
          <uni-icons type="share" size="20" class="sheet-icon"></uni-icons>
          <text>分享话题</text>
        </view>
        <view class="sheet-item cancel-item" @click="hideActionSheet">
          <text>取消</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 话题ID，从路由参数获取
      topicId: '',
      
      // 话题详情数据
      topic: {
        id: 1001,
        title: '大疆Mavic 3 Pro使用一个月体验分享',
        content: '入手Mavic 3 Pro已经一个月了，这段时间飞过城市、海边和山区，总体来说非常满意。特别是三摄像头系统，在不同场景下都能拍出不错的效果。续航方面也比我之前的Air 2S要好不少，正常拍摄能坚持35分钟左右。不过发现一个问题，在强逆光环境下，镜头偶尔会出现眩光，不知道大家有没有遇到类似情况？另外想请教一下各位，有没有推荐的ND滤镜？希望能交流一下使用心得。',
        category: '设备评测',
        type: 'equipment',
        publishTime: '2023-11-12 15:30',
        likeCount: 128,
        commentCount: 36,
        shareCount: 24,
        isLiked: false,
        isCollected: false,
        images: [
          'https://picsum.photos/id/1039/800/600',
          'https://picsum.photos/id/1043/800/600',
          'https://picsum.photos/id/1053/800/600'
        ],
        tags: ['大疆', 'Mavic 3 Pro', '无人机评测'],
        author: {
          id: 1001,
          name: '飞手小李',
          avatar: 'https://picsum.photos/id/1012/100/100',
          verified: true,
          isFollowed: false
        }
      },
      
      // 当前登录用户
      currentUser: {
        id: 2001,
        avatar: 'https://picsum.photos/id/1025/100/100'
      },
      
      // 评论数据
      comments: [],
      commentContent: '',
      page: 1,
      pageSize: 10,
      hasMoreComments: true,
      isLoadingComments: false,
      
      // 相关话题
      relatedTopics: [],
      
      // 状态控制
      showActionSheet: false,
      isOwnTopic: false, // 是否是当前用户自己的话题
      showInputPanel: false
    };
  },
  
  onLoad(options) {
    // 获取话题ID
    this.topicId = options.id || '';
    // 加载话题详情
    this.loadTopicDetail();
    // 加载评论
    this.loadComments();
    // 加载相关话题
    this.loadRelatedTopics();
  },
  
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack();
    },
    
    // 加载话题详情
    loadTopicDetail() {
      // 模拟API请求
      setTimeout(() => {
        console.log(`加载话题ID为${this.topicId}的详情`);
        // 模拟判断是否为自己的话题
        this.isOwnTopic = this.topic.author.id === this.currentUser.id;
      }, 800);
    },
    
    // 加载评论
    loadComments() {
      if (!this.hasMoreComments || this.isLoadingComments) return;
      
      this.isLoadingComments = true;
      
      // 模拟API请求
      setTimeout(() => {
        const newComments = this.generateMockComments();
        this.comments = [...this.comments, ...newComments];
        
        // 控制是否还有更多评论
        if (newComments.length < this.pageSize) {
          this.hasMoreComments = false;
        }
        
        this.page++;
        this.isLoadingComments = false;
      }, 1500);
    },
    
    // 加载更多评论
    loadMoreComments() {
      this.loadComments();
    },
    
    // 加载相关话题
    loadRelatedTopics() {
      // 模拟API请求
      setTimeout(() => {
        this.relatedTopics = [
          {
            id: 1002,
            title: 'Mavic 3 Pro与Air 2S对比测评',
            content: '很多朋友问我这两款机型该怎么选，今天就来详细对比一下...',
            author: {
              name: '无人机爱好者'
            },
            publishTime: '2023-11-10',
            commentCount: 28,
            images: ['https://picsum.photos/id/1060/300/200']
          },
          {
            id: 1003,
            title: '推荐几款适合Mavic 3 Pro的ND滤镜',
            content: '根据我的使用经验，这几款ND滤镜效果不错...',
            author: {
              name: '摄影达人'
            },
            publishTime: '2023-11-08',
            commentCount: 15,
            images: []
          },
          {
            id: 1004,
            title: 'Mavic 3 Pro飞行中遇到的问题及解决方法',
            content: '分享几个我遇到的问题和解决方案...',
            author: {
              name: '老飞手',
              avatar: 'https://picsum.photos/id/1074/100/100'
            },
            publishTime: '2023-11-05',
            commentCount: 42,
            images: ['https://picsum.photos/id/1071/300/200']
          }
        ];
      }, 1000);
    },
    
    // 获取图片网格样式
    getImageGridClass(count) {
      if (count === 1) return '1';
      if (count === 2 || count === 4) return '2';
      return '3';
    },
    
    // 预览图片
    previewImage(current, urls) {
      uni.previewImage({
        current: current,
        urls: urls
      });
    },
    
    // 处理点赞
    handleLike() {
      this.topic.isLiked = !this.topic.isLiked;
      this.topic.likeCount += this.topic.isLiked ? 1 : -1;
      
      // 显示点赞反馈
      uni.showToast({
        title: this.topic.isLiked ? '点赞成功' : '取消点赞',
        icon: 'none',
        duration: 1500
      });
    },
    
    // 处理收藏
    handleCollect() {
      this.topic.isCollected = !this.topic.isCollected;
      
      // 显示收藏反馈
      uni.showToast({
        title: this.topic.isCollected ? '收藏成功' : '取消收藏',
        icon: 'none',
        duration: 1500
      });
    },
    
    // 处理分享
    handleShare() {
      uni.share({
        title: this.topic.title || '来自无人机社区的分享',
        content: this.topic.content.substring(0, 50) + '...',
        imageUrl: this.topic.images.length > 0 ? this.topic.images[0] : '',
        success: () => {
          // 更新分享数量
          this.topic.shareCount++;
          
          uni.showToast({
            title: '分享成功',
            icon: 'none'
          });
        }
      });
    },
    
    // 关注作者
    followAuthor() {
      this.topic.author.isFollowed = true;
      uni.showToast({
        title: '关注成功',
        icon: 'none'
      });
    },
    
    // 取消关注作者
    unfollowAuthor() {
      this.topic.author.isFollowed = false;
      uni.showToast({
        title: '已取消关注',
        icon: 'none'
      });
    },
    
    // 提交评论
    submitComment() {
      if (!this.commentContent.trim()) return;
      
      // 创建新评论
      const newComment = {
        id: Date.now(),
        author: {
          id: this.currentUser.id,
          name: '我',
          avatar: this.currentUser.avatar
        },
        content: this.commentContent.trim(),
        publishTime: '刚刚',
        likeCount: 0,
        isLiked: false,
        replies: [],
        totalReplyCount: 0
      };
      
      // 添加到评论列表最前面
      this.comments.unshift(newComment);
      
      // 更新评论数量
      this.topic.commentCount++;
      
      // 清空输入框
      this.commentContent = '';
      
      // 收起键盘
      uni.hideKeyboard();
      
      // 显示成功提示
      uni.showToast({
        title: '评论成功',
        icon: 'none'
      });
    },
    
    // 点赞评论
    likeComment(comment, index) {
      const commentIndex = this.comments.findIndex(item => item.id === comment.id);
      if (commentIndex === -1) return;
      
      // 更新点赞状态和数量
      this.comments[commentIndex].isLiked = !this.comments[commentIndex].isLiked;
      this.comments[commentIndex].likeCount += this.comments[commentIndex].isLiked ? 1 : -1;
    },
    
    // 回复评论
    replyComment(comment) {
      // 重置所有回复输入框状态
      this.comments.forEach(item => {
        item.showReplyInput = false;
        item.replyContent = '';
        item.replyingTo = null;
      });
      
      // 显示当前评论的回复输入框
      const commentIndex = this.comments.findIndex(item => item.id === comment.id);
      if (commentIndex !== -1) {
        this.comments[commentIndex].showReplyInput = true;
        this.comments[commentIndex].replyContent = '';
        
        // 自动聚焦（实际项目中可能需要使用ref实现）
        setTimeout(() => {
          // 模拟聚焦
        }, 300);
      }
    },
    
    // 取消回复
    cancelReply(comment) {
      const commentIndex = this.comments.findIndex(item => item.id === comment.id);
      if (commentIndex !== -1) {
        this.comments[commentIndex].showReplyInput = false;
        this.comments[commentIndex].replyContent = '';
        this.comments[commentIndex].replyingTo = null;
      }
    },
    
    // 提交回复
    submitReply(comment) {
      if (!comment.replyContent.trim()) return;
      
      const commentIndex = this.comments.findIndex(item => item.id === comment.id);
      if (commentIndex === -1) return;
      
      // 创建新回复
      const newReply = {
        id: Date.now(),
        author: {
          id: this.currentUser.id,
          name: '我'
        },
        content: comment.replyContent.trim(),
        publishTime: '刚刚',
        likeCount: 0,
        isLiked: false
      };
      
      // 如果是回复特定用户
      if (comment.replyingTo) {
        newReply.toUserId = comment.replyingTo.id;
        newReply.toUserName = comment.replyingTo.name;
      }
      
      // 添加到回复列表最前面
      if (!this.comments[commentIndex].replies) {
        this.comments[commentIndex].replies = [];
      }
      this.comments[commentIndex].replies.unshift(newReply);
      
      // 更新总回复数
      this.comments[commentIndex].totalReplyCount++;
      
      // 清空回复输入框并隐藏
      this.comments[commentIndex].replyContent = '';
      this.comments[commentIndex].showReplyInput = false;
      this.comments[commentIndex].replyingTo = null;
      
      // 收起键盘
      uni.hideKeyboard();
      
      // 显示成功提示
      uni.showToast({
        title: '回复成功',
        icon: 'none'
      });
    },
    
    // 点赞回复
    likeReply(comment, reply, rIndex) {
      const commentIndex = this.comments.findIndex(item => item.id === comment.id);
      if (commentIndex === -1 || !this.comments[commentIndex].replies) return;
      
      const replyIndex = this.comments[commentIndex].replies.findIndex(r => r.id === reply.id);
      if (replyIndex === -1) return;
      
      // 更新点赞状态和数量
      this.comments[commentIndex].replies[replyIndex].isLiked = !this.comments[commentIndex].replies[replyIndex].isLiked;
      this.comments[commentIndex].replies[replyIndex].likeCount += this.comments[commentIndex].replies[replyIndex].isLiked ? 1 : -1;
    },
    
    // 回复回复
    replyToReply(comment, reply) {
      // 重置所有回复输入框状态
      this.comments.forEach(item => {
        item.showReplyInput = false;
        item.replyContent = '';
        item.replyingTo = null;
      });
      
      // 显示当前评论的回复输入框，并指定回复对象
      const commentIndex = this.comments.findIndex(item => item.id === comment.id);
      if (commentIndex !== -1) {
        this.comments[commentIndex].showReplyInput = true;
        this.comments[commentIndex].replyContent = '';
        this.comments[commentIndex].replyingTo = {
          id: reply.author.id,
          name: reply.author.name
        };
        
        // 自动聚焦（实际项目中可能需要使用ref实现）
        setTimeout(() => {
          // 模拟聚焦
        }, 300);
      }
    },
    
    // 加载更多回复
    loadMoreReplies(comment) {
      const commentIndex = this.comments.findIndex(item => item.id === comment.id);
      if (commentIndex === -1) return;
      
      // 模拟加载更多回复
      uni.showLoading({
        title: '加载中...',
        mask: false
      });
      
      setTimeout(() => {
        uni.hideLoading();
        
        // 生成模拟回复
        const moreReplies = [
          {
            id: Date.now() + 1,
            author: {
              id: 1005 + Math.floor(Math.random() * 10),
              name: '用户' + Math.floor(Math.random() * 1000)
            },
            content: '我也遇到过类似问题，后来发现是镜头没擦干净',
            publishTime: '3天前',
            likeCount: Math.floor(Math.random() * 20),
            isLiked: false
          },
          {
            id: Date.now() + 2,
            author: {
              id: 1005 + Math.floor(Math.random() * 10),
              name: '用户' + Math.floor(Math.random() * 1000)
            },
            content: '学习了，谢谢分享',
            publishTime: '4天前',
            likeCount: Math.floor(Math.random() * 10),
            isLiked: false,
            toUserId: comment.replies[0].author.id,
            toUserName: comment.replies[0].author.name
          }
        ];
        
        // 添加到回复列表
        this.comments[commentIndex].replies = [...this.comments[commentIndex].replies, ...moreReplies];
      }, 1000);
    },
    
    // 聚焦评论输入框
    focusComment() {
      // 实际项目中可以通过ref获取输入框并聚焦
      this.showInputPanel = true;
    },
    
    // 评论输入框聚焦事件
    onCommentFocus() {
      this.showInputPanel = true;
    },
    
    // 评论输入框失焦事件
    onCommentBlur() {
      // 延迟隐藏，避免快速操作问题
      setTimeout(() => {
        this.showInputPanel = false;
      }, 300);
    },
    
    // 显示操作菜单
    showActionSheet() {
      this.showActionSheet = true;
    },
    
    // 隐藏操作菜单
    hideActionSheet() {
      this.showActionSheet = false;
    },
    
    // 举报话题
    reportTopic() {
      this.hideActionSheet();
      uni.showModal({
        title: '举报话题',
        content: '请选择举报原因',
        // 实际项目中这里会显示举报原因选择
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '举报已提交',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 编辑话题
    editTopic() {
      this.hideActionSheet();
      uni.navigateTo({
        url: `/pages/community/publish-topic?edit=true&id=${this.topic.id}`
      });
    },
    
    // 删除话题
    deleteTopic() {
      this.hideActionSheet();
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个话题吗？删除后不可恢复。',
        cancelText: '取消',
        confirmText: '删除',
        success: (res) => {
          if (res.confirm) {
            // 模拟删除操作
            uni.showLoading({
              title: '删除中...'
            });
            
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '删除成功',
                icon: 'none'
              });
              
              // 延迟返回列表页
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            }, 1500);
          }
        }
      });
    },
    
    // 分享话题
    shareTopic() {
      this.hideActionSheet();
      this.handleShare();
    },
    
    // 跳转到话题详情
    gotoTopicDetail(topicId) {
      uni.navigateTo({
        url: `/pages/community/topic-detail?id=${topicId}`
      });
    },
    
    // 跳转到标签话题列表
    gotoTagTopics(tag) {
      uni.navigateTo({
        url: `/pages/community/tag-topics?tag=${encodeURIComponent(tag)}`
      });
    },
    
    // 生成模拟评论数据
    generateMockComments() {
      const mockComments = [];
      
      for (let i = 0; i < this.pageSize; i++) {
        const id = (this.page - 1) * this.pageSize + i + 100;
        const replyCount = Math.floor(Math.random() * 10);
        const replies = [];
        
        // 生成随机回复
        for (let j = 0; j < Math.min(3, replyCount); j++) {
          replies.push({
            id: id * 100 + j,
            author: {
              id: 1005 + Math.floor(Math.random() * 10),
              name: '用户' + Math.floor(Math.random() * 1000)
            },
            content: this.getRandomReplyContent(),
            publishTime: this.getRandomTime(),
            likeCount: Math.floor(Math.random() * 20),
            isLiked: false,
            // 随机添加回复对象
            ...(Math.random() > 0.5 ? {
              toUserId: 1001,
              toUserName: '飞手小李'
            } : {})
          });
        }
        
        mockComments.push({
          id: id,
          author: {
            id: 1005 + Math.floor(Math.random() * 10),
            name: '用户' + Math.floor(Math.random() * 1000),
            avatar: `https://picsum.photos/id/${300 + Math.floor(Math.random() * 50)}/100/100`
          },
          content: this.getRandomCommentContent(),
          publishTime: this.getRandomTime(),
          likeCount: Math.floor(Math.random() * 50),
          isLiked: false,
          replies: replies,
          totalReplyCount: replyCount,
          showReplyInput: false,
          replyContent: '',
          replyingTo: null
        });
      }
      
      return mockComments;
    },
    
    // 生成随机评论内容
    getRandomCommentContent() {
      const comments = [
        '我也买了这款，确实不错，尤其是夜景模式提升明显',
        '关于ND滤镜，我推荐NiSi的，效果很好，就是价格有点贵',
        '眩光问题我也遇到过，后来换了个遮光罩就好多了',
        '请问续航真的有那么好吗？我现在用的Air 2只有25分钟左右',
        '想知道这款和Mavic 3 Classic有什么主要区别？',
        '拍的真不错，请问后期用的什么软件处理的？',
        '我也打算入手一台，请问现在价格有优惠吗？',
        '请问这款无人机的抗风能力怎么样？我经常在海边飞'
      ];
      
      return comments[Math.floor(Math.random() * comments.length)];
    },
    
    // 生成随机回复内容
    getRandomReplyContent() {
      const replies = [
        '是的，我也觉得很好用',
        '谢谢推荐，我去了解一下',
        '请问具体是哪一款遮光罩呢？',
        '比Air 2强多了，值得升级',
        '主要是摄像头配置不同，Pro版本更专业',
        '用的是Lightroom和Premiere',
        '最近双十一有活动，可以关注一下',
        '抗风能力不错，6级风以内没问题'
      ];
      
      return replies[Math.floor(Math.random() * replies.length)];
    },
    
    // 生成随机时间
    getRandomTime() {
      const times = [
        '刚刚',
        '1分钟前',
        '5分钟前',
        '15分钟前',
        '30分钟前',
        '1小时前',
        '2小时前',
        '5小时前',
        '昨天',
        '2天前',
        '3天前',
        '1周前'
      ];
      
      return times[Math.floor(Math.random() * times.length)];
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #165DFF;
$primary-light: #E8F3FF;
$danger: #FF4D4F;
$warning: #FF7D00;
$success: #00B42A;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$bg-light: #F5F7FA;
$bg-white: #FFFFFF;
$border-light: #E5E6EB;
$shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);

.topic-detail-page {
  background-color: $bg-light;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
}

// 导航栏
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  background-color: $bg-white;
  border-bottom: 1px solid $border-light;
  
  .back-btn, .more-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    &:active {
      background-color: $bg-light;
    }
  }
  
  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
  }
}

// 话题滚动区域
.topic-scroll {
  height: calc(100vh - var(--status-bar-height) - 48px);
}

// 话题内容
.topic-content {
  background-color: $bg-white;
  padding: 16px;
  margin-bottom: 10px;
  
  // 话题作者信息
  .topic-author {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    
    .author-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .author-info {
      flex: 1;
      
      .author-name {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        color: $text-primary;
        margin-bottom: 4px;
        
        .verified-badge {
          margin-left: 6px;
        }
      }
      
      .topic-meta {
        font-size: 12px;
        color: $text-tertiary;
        
        .topic-category {
          margin-left: 4px;
        }
      }
    }
    
    .follow-btn, .followed-btn {
      padding: 6px 14px;
      border-radius: 16px;
      font-size: 14px;
      font-weight: 500;
    }
    
    .follow-btn {
      background-color: $primary;
      color: white;
    }
    
    .followed-btn {
      background-color: $bg-light;
      color: $text-secondary;
    }
  }
  
  // 话题主体内容
  .topic-main {
    margin-bottom: 20px;
    
    .topic-title {
      font-size: 20px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 12px;
      line-height: 1.4;
    }
    
    .topic-text {
      font-size: 16px;
      color: $text-secondary;
      line-height: 1.8;
      margin-bottom: 16px;
      white-space: pre-line; // 保留换行符
    }
    
    // 话题图片
    .topic-images {
      margin-bottom: 16px;
      
      .image-grid {
        display: grid;
        gap: 4px;
        
        &.grid-1 {
          grid-template-columns: 1fr;
        }
        
        &.grid-2 {
          grid-template-columns: repeat(2, 1fr);
        }
        
        &.grid-3 {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      
      .topic-image {
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 8px;
      }
    }
    
    // 话题标签
    .topic-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .tag-item {
        background-color: $primary-light;
        color: $primary;
        font-size: 13px;
        padding: 4px 12px;
        border-radius: 16px;
        
        &:active {
          background-color: rgba(22, 93, 255, 0.2);
        }
      }
    }
  }
  
  // 话题互动数据
  .topic-actions {
    display: flex;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid $border-light;
    
    .action-item {
      display: flex;
      align-items: center;
      margin-right: 28px;
      font-size: 15px;
      color: $text-tertiary;
      
      &:active {
        opacity: 0.7;
      }
      
      .action-count {
        margin-left: 8px;
        
        &.liked {
          color: $danger;
        }
        
        &.collected {
          color: $warning;
        }
      }
    }
  }
}

// 评论区分割线
.divider {
  background-color: $bg-white;
  padding: 12px 16px;
  border-bottom: 1px solid $border-light;
  
  text {
    font-size: 16px;
    font-weight: 500;
    color: $text-primary;
  }
}

// 评论输入框
.comment-input-container {
  display: flex;
  align-items: flex-end;
  background-color: $bg-white;
  padding: 12px 16px;
  border-bottom: 1px solid $border-light;
  
  .user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
  }
  
  .comment-input {
    flex: 1;
    min-height: 36px;
    max-height: 120px;
    padding: 8px 12px;
    background-color: $bg-light;
    border-radius: 18px;
    font-size: 14px;
    color: $text-primary;
    resize: none;
    box-sizing: border-box;
    
    &::placeholder {
      color: $text-tertiary;
    }
  }
  
  .send-btn {
    width: 56px;
    height: 36px;
    margin-left: 10px;
    background-color: $primary;
    color: white;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    
    &:disabled {
      background-color: $border-light;
      color: $text-tertiary;
    }
  }
}

// 评论列表
.comments-list {
  background-color: $bg-white;
  padding: 0 16px;
  
  .comment-item {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid $border-light;
    
    &:last-child {
      border-bottom: none;
    }
    
    .comment-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .comment-content {
      flex: 1;
      
      .comment-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px;
        
        .comment-author {
          font-size: 14px;
          font-weight: 500;
          color: $text-primary;
        }
        
        .comment-time {
          font-size: 12px;
          color: $text-tertiary;
        }
      }
      
      .comment-text {
        font-size: 14px;
        color: $text-secondary;
        line-height: 1.6;
        margin-bottom: 8px;
      }
      
      .comment-actions {
        display: flex;
        
        .comment-action {
          display: flex;
          align-items: center;
          margin-right: 24px;
          font-size: 12px;
          color: $text-tertiary;
          
          &:active {
            opacity: 0.7;
          }
          
          .action-text {
            margin-left: 4px;
          }
        }
      }
      
      // 评论回复
      .comment-replies {
        margin-top: 12px;
        padding-left: 16px;
        border-left: 2px solid $border-light;
        
        .reply-item {
          font-size: 13px;
          color: $text-secondary;
          margin-bottom: 10px;
          line-height: 1.6;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .reply-author {
            color: $primary;
            font-weight: 500;
          }
          
          .reply-to {
            color: $text-tertiary;
          }
          
          .reply-actions {
            display: flex;
            margin-top: 4px;
            
            .reply-action {
              display: flex;
              align-items: center;
              margin-right: 18px;
              font-size: 12px;
              color: $text-tertiary;
              
              &:active {
                opacity: 0.7;
              }
              
              .reply-like-count {
                margin-left: 4px;
              }
              
              .reply-text {
                margin-left: 4px;
              }
            }
          }
        }
        
        .show-more-replies {
          margin-top: 8px;
          font-size: 12px;
          color: $primary;
          
          &:active {
            opacity: 0.7;
          }
        }
      }
      
      // 回复输入框
      .reply-input-container {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        
        .reply-input {
          width: 100%;
          min-height: 32px;
          max-height: 100px;
          padding: 8px 12px;
          background-color: $bg-light;
          border-radius: 16px;
          font-size: 13px;
          color: $text-primary;
          resize: none;
          box-sizing: border-box;
        }
        
        .reply-input-actions {
          display: flex;
          justify-content: flex-end;
          margin-top: 6px;
          
          .cancel-reply, .send-reply {
            font-size: 13px;
            padding: 4px 12px;
            border-radius: 12px;
          }
          
          .cancel-reply {
            color: $text-tertiary;
            margin-right: 8px;
          }
          
          .send-reply {
            background-color: $primary;
            color: white;
            
            &.disabled {
              background-color: $border-light;
              color: $text-tertiary;
            }
          }
        }
      }
    }
  }
}

// 加载更多评论
.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  background-color: $bg-white;
  color: $text-tertiary;
  
  .loading-text {
    margin-left: 8px;
    font-size: 14px;
  }
}

// 没有更多评论
.no-more {
  text-align: center;
  padding: 20px 0;
  background-color: $bg-white;
  color: $text-tertiary;
  font-size: 14px;
}

// 暂无评论
.no-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background-color: $bg-white;
  color: $text-tertiary;
  
  .no-comments-text {
    font-size: 16px;
    margin-top: 20px;
  }
}

// 相关推荐
.related-topics {
  background-color: $bg-white;
  padding: 16px;
  margin-top: 10px;
  
  .related-title {
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid $border-light;
  }
  
  .related-list {
    .related-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid $border-light;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:active {
        background-color: $bg-light;
      }
      
      .related-content {
        flex: 1;
        overflow: hidden;
        
        .related-title-text {
          font-size: 14px;
          color: $text-primary;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin-bottom: 8px;
        }
        
        .related-meta {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: $text-tertiary;
          
          .related-author {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .related-time {
            margin: 0 8px;
          }
          
          .related-stats {
            display: flex;
            align-items: center;
            
            text {
              margin-left: 4px;
            }
          }
        }
      }
      
      .related-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        object-fit: cover;
        margin-left: 12px;
        flex-shrink: 0;
      }
    }
  }
}

// 底部空白区域
.bottom-padding {
  background-color: $bg-light;
}

// 操作菜单
.action-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .sheet-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
  }
  
  .sheet-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.3s;
    
    .sheet-item {
      display: flex;
      align-items: center;
      padding: 16px;
      font-size: 16px;
      color: $text-primary;
      
      &:active {
        background-color: $bg-light;
      }
      
      .sheet-icon {
        margin-right: 12px;
        color: $text-secondary;
      }
    }
    
    .cancel-item {
      margin-top: 8px;
      background-color: $bg-light;
      color: $text-tertiary;
      text-align: center;
      border-radius: 0 0 16px 16px;
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
</style>
    